@use "design-system";

.nft-item {
  &__card {
    cursor: pointer;
  }

  &__container {
    width: 100%;
    padding: 0;
    border-radius: 8px;
  }

  &__badge-wrapper {
    max-width: 100%;
    position: relative;
    align-self: center;

    &__clickable {
      cursor: pointer;
    }
  }

  &__item-image {
    border-radius: 8px;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
  }

  &__item-image--hidden {
    border-radius: 8px;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.5);
    mix-blend-mode: lighten;
  }



  @include design-system.screen-sm-max {
    &__item-image--hidden {
      background: rgba(255, 255, 255, 0.5);
      mix-blend-mode: lighten;
    }
  }

  &__item-detail {
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
  }
}
